<template>
  <!-- 修改基本信息 / 场所照片 -->
  <view class="placeBasic">
    <view class="wrapper">
      <view class="wrapper-item content">
        <block v-if="orFlag == 1 || orFlag == 2">
          <u-form :model="form" ref="form" label-width="100" :error-type="errorType">
            <u-form-item label="场所名称" borderBottom required>
              <u--input v-model.trim="form.companyName" border="none" placeholder="请填写" :maxlength="30"></u--input>
            </u-form-item>

            <!--  <u-form-item label="详细地址" borderBottom>
              <u--input v-model="form.addressDetail" border="none" placeholder="请填写" :maxlength="30"></u--input>
            </u-form-item> -->

            <u-form-item label="经纬度" borderBottom required>
              <view class="map-form">
                <u--input v-model="lnglat" border="none" placeholder="在地图上选择点位" :maxlength="30"
                  :readonly="true"></u--input>
                <view class="map-img" @click="mapHandle">
                  <image :src="baseImgUrl + 'map-icon.png'" mode="aspectFill"></image>
                </view>
              </view>
            </u-form-item>

            <u-form-item label="开业时间" borderBottom required>
              <view class="map-form">
                <uni-datetime-picker v-model="form.openingTime" type="date" :hide-second="true">
                  <u--input v-model="form.openingTime" border="none" placeholder="请选择" disabled disabledColor="#fff"
                    :maxlength="30" :readonly="true"></u--input>
                </uni-datetime-picker>
                <view class="map-img" @click="mapHandle">
                  <image :src="baseImgUrl + 'day-icon2.png'" mode="aspectFill" style="width: 26rpx;height: 26rpx;">
                  </image>
                </view>
              </view>
            </u-form-item>

            <view style="padding-top: 20rpx"></view>
            <u-form-item label="场所门头照片" required></u-form-item>
            <u-upload :fileList="fileList" @afterRead="afterRead" @delete="(e) => {deletePic(1, e)}" name="file"
              :maxCount="1" width="96" height="90">
              <image :src="baseImgUrl + 'upload-icon2.png'" style="width: 200rpx; height: 180rpx" mode="aspectFill">
              </image>
            </u-upload>

            <view style="padding-top: 20rpx"></view>
            <u-form-item label="场所内部照片" required>
              <text style="color: #a1a1a1; font-size: 26rpx">
                (请上传1~9张照片)
              </text>
            </u-form-item>
            <u-upload :fileList="fileList2" @afterRead="afterReadTwo" @delete="deletePicTwo" name="file" :maxCount="9"
              :multiple="true" width="96" height="90">
              <image :src="baseImgUrl + 'upload-icon2.png'" style="width: 200rpx; height: 180rpx"></image>
            </u-upload>

            <view style="padding-top: 20rpx"></view>
            <u-form-item label="重点部位照片">
              <text style="color: #a1a1a1; font-size: 26rpx">
                (请上传1~9张照片)
              </text>
            </u-form-item>
            <u-upload :fileList="fileList3" @afterRead="afterReadThree" @delete="(e) => {deletePic(3, e)}" name="file"
              :maxCount="9" :multiple="true" width="96" height="90">
              <image :src="baseImgUrl + 'upload-icon2.png'" style="width: 200rpx; height: 180rpx" mode="aspectFill">
              </image>
            </u-upload>

            <view style="padding-top: 20rpx"></view>
            <u-form-item label="风险点照片">
              <text style="color: #a1a1a1; font-size: 26rpx">
                (请上传1~9张照片)
              </text>
            </u-form-item>
            <u-upload :fileList="fileList4" @afterRead="afterReadFour" @delete="(e) => {deletePic(4, e)}" name="file"
              :maxCount="9" :multiple="true" width="96" height="90">
              <image :src="baseImgUrl + 'upload-icon2.png'" style="width: 200rpx; height: 180rpx" mode="aspectFill">
              </image>
            </u-upload>
          </u-form>
        </block>
        <block v-if="orFlag == 3">
          <u-form :model="form" ref="form" label-width="100" :error-type="errorType">
            <u-form-item label="场所门头照片" required></u-form-item>
            <view class="place-img">
              <image :src="fileList[0].url" style="width: 200rpx; height: 160rpx" @click="pvwImage([fileList[0].url])"
                mode="aspectFill"></image>
            </view>

            <u-form-item label="场所内部照片" required></u-form-item>
            <view class="place-img">
              <image :class="fileList2.length % 3 ? '' : 'placeAfter'" v-for="(item, index) in fileList2" :key="index"
                :src="item.url" style="width: 200rpx; height: 160rpx" @click="pvwImage(fileList2.map(item => item.url))"
                mode="aspectFill">
              </image>
            </view>

            <u-form-item label="重点部位照片"></u-form-item>
            <view class="place-img">
              <image :class="fileList3.length % 3 ? '' : 'placeAfter'" v-for="(item, index) in fileList3" :key="index"
                :src="item.url" style="width: 200rpx; height: 160rpx" @click="pvwImage(fileList3.map(item => item.url))"
                mode="aspectFill">
              </image>
            </view>

            <u-form-item label="风险点照片"></u-form-item>
            <view class="place-img">
              <image :class="fileList4.length % 3 ? '' : 'placeAfter'" v-for="(item, index) in fileList4" :key="index"
                :src="item.url" style="width: 200rpx; height: 160rpx" @click="pvwImage(fileList4.map(item => item.url))"
                mode="aspectFill">
              </image>
            </view>
          </u-form>
        </block>
      </view>
    </view>

    <view class="btns thispageBtn">
      <block v-if="orFlag == 1 || orFlag == 2">
        <button class="cancel-btn lt" type="primary" @click="navBack('back', 1, 1)">
          取消
        </button>
        <button class="submit-btn" type="primary" @click="submitHandle">
          保存
        </button>
      </block>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    messageDetail,
    imagesPathList,
    updateCompany
  } from "@/api/myself.js";
  import {
    Toast,
    navBack,
    handleClickRouter,
    uniTrim,
    pvwImage,
    useNetWork,
    isLoading,
    getHeader,
    uploadFile,
  } from "@/utils/util.js";
  import moment from '@/utils/moment.js'

  export default {
    name: "placeBasic",
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        baseURL: this.$baseURL,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        options: {},
        form: {},
        errorType: ["none"],
        orFlag: 1, // 1：添加   2：编辑  3：详情
        lnglat: "",
        fileList: [],
        fileList2: [],
        fileList3: [],
        fileList4: [],
        doorheadUrlList: [],
        interiorUrlList: [],
        keyPartsUrlList: [],
        riskPointsUrlList: [],
        file2Num: 0, // 记录长传图片张数
      };
    },
    onLoad(options) {
      this.options = options;
      this.orFlag = options.orFlag;

      if (options.orFlag == 3) {
        uni.setNavigationBarTitle({
          title: "场所照片",
        });
      }

      messageDetail({
        companyId: this.options.id
      }).then((res) => {
        if (res.code == 200) {
          let {
            companyInfo,
          } = res.result;
          const {
            openingTime
          } = companyInfo
          this.form.companyName = companyInfo.companyName;
          if (openingTime) {
            this.$set(this.form, 'openingTime', moment(openingTime).format('YYYY/MM/DD'));
          }
          // this.form.addressDetail = companyInfo.addressDetail;
          this.lnglat = companyInfo.lng ? `${companyInfo.lng}-${companyInfo.lat}` : '';
        }
      });

      imagesPathList({
        bizId: this.options.id,
        bizType: 4
      }).then((res) => {
        if (res.code == 200) {
          this.fileList.push({
            url: this.imgPrefix + res.result[0].path,
          });
          this.doorheadUrlList.push(res.result[0].path);
        }
      });

      imagesPathList({
        bizId: this.options.id,
        bizType: 5
      }).then((res) => {
        let {
          code,
          result
        } = res;
        if (code == 200) {
          for (var i in result) {
            this.fileList2.push({
              url: this.imgPrefix + result[i].path,
            });
            this.interiorUrlList.push(result[i].path);
            this.file2Num = this.fileList2.length;
          }
        }
      });

      // 重点部位照片
      imagesPathList({
        bizId: this.options.id,
        bizType: 17
      }).then((res) => {
        const {
          code,
          result
        } = res
        if (code == 200) {
          for (let i in result) {
            this.fileList3.push({
              url: this.imgPrefix + result[i].path,
            });
            this.keyPartsUrlList.push(result[i].path);
          }
        }
      });

      // 风险点照片
      imagesPathList({
        bizId: this.options.id,
        bizType: 18
      }).then((res) => {
        const {
          code,
          result
        } = res
        if (code == 200) {
          for (let i in result) {
            this.fileList4.push({
              url: this.imgPrefix + result[i].path,
            });
            this.riskPointsUrlList.push(result[i].path);
          }
        }
      });
    },
    methods: {
      handleClickRouter,
      navBack,
      pvwImage,
      mapHandle() {
        let _this = this;
        uni.chooseLocation({
          success: function(res) {
            let {
              longitude,
              latitude
            } = res;
            _this.form.lng = longitude;
            _this.form.lat = latitude;
            _this.lnglat = `${longitude}-${latitude}`;
            // _this.form.addressDetail = res.address
          },
          fail: function(err) {
            console.log(err, "错误的");
          },
        });
      },
      afterRead(info) {
        useNetWork(); // 判断是否有网络
        isLoading();

        let _this = this;
        uploadFile({
            url: "/web/sys/upload/upload_file",
            filePath: info.file.url,
            name: "file",
            formData: {
              type: 18,
            },
          })
          .then((res) => {
            isLoading(false);
            let {
              fullPath,
              halfPath
            } = res.result;
            _this.fileList.push({
              url: fullPath
            });
            _this.doorheadUrlList.push(halfPath);
          })
          .finally(() => {
            isLoading(false);
          })
      },
      afterReadTwo(info) {
        useNetWork(); // 判断是否有网络
        isLoading();

        let _this = this;
        _this.file2Num += info.file.length;
        for (let v of info.file) {
          uploadFile({
              url: "/web/sys/upload/upload_file",
              filePath: v.url,
              name: "file",
              formData: {
                type: 19,
              },
            })
            .then((res) => {
              let {
                fullPath,
                halfPath
              } = res.result;
              _this.fileList2.push({
                url: fullPath
              });
              _this.interiorUrlList.push(halfPath);
              if (_this.interiorUrlList.length == _this.file2Num) {
                isLoading(false);
              }
            })
            .finally(() => {
              isLoading(false);
            })
        }
      },
      afterReadThree(info) {
        useNetWork(); // 判断是否有网络
        isLoading();

        let _this = this;
        for (let v of info.file) {
          uploadFile({
              url: "/web/sys/upload/upload_file",
              filePath: v.url,
              name: "file",
              formData: {
                type: 45,
              },
            })
            .then((res) => {
              isLoading(false);
              let {
                fullPath,
                halfPath
              } = res.result;
              _this.fileList3.push({
                url: fullPath
              });
              _this.keyPartsUrlList.push(halfPath);
            })
            .finally(() => {
              isLoading(false);
            })
        }
      },
      afterReadFour(info) {
        useNetWork(); // 判断是否有网络
        isLoading();

        let _this = this;
        for (let v of info.file) {
          uploadFile({
              url: "/web/sys/upload/upload_file",
              filePath: v.url,
              name: "file",
              formData: {
                type: 46,
              },
            })
            .then((res) => {
              isLoading(false);
              let {
                fullPath,
                halfPath
              } = res.result;
              _this.fileList4.push({
                url: fullPath
              });
              _this.riskPointsUrlList.push(halfPath);
            })
            .finally(() => {
              isLoading(false);
            })
        }
      },
      deletePic(num, e) {
        if (num == 1) {
          this.fileList = [];
          this.doorheadUrlList = [];
        }

        if (num == 3) {
          this.fileList3.splice(e.index, 1);
          this.keyPartsUrlList.splice(e.index, 1);
        }

        if (num == 4) {
          this.fileList4.splice(e.index, 1);
          this.riskPointsUrlList.splice(e.index, 1);
        }
      },
      deletePicTwo(e) {
        this.fileList2.splice(e.index, 1);
        this.interiorUrlList.splice(e.index, 1);
        this.file2Num -= 1;
      },
      submitHandle() {
        let {
          companyName,
          // addressDetail,
          openingTime,
          neibuzhaop
        } = this.form;

        if (!companyName || !uniTrim(companyName)) {
          Toast("请输入场所名称");
          return;
        }

        let companyRegular = /^[a-zA-Z\u4e00-\u9fa5]+$/;
        if (!companyRegular.test(companyName)) {
          Toast("请输入正确的场所名称");
          return;
        }

        if (!this.lnglat) {
          Toast("请选择经纬度");
          return;
        }
        if (!openingTime) {
          Toast("请选择开业时间");
          return;
        }

        if (!this.fileList.length) {
          Toast("请上传场所门头照片");
          return;
        }

        if (!this.fileList2.length) {
          Toast("至少上传一张场所内部照片");
          return;
        }

        // if (!this.fileList3.length) {
        //   Toast("请上传重点部位照片");
        //   return;
        // }

        // if (!this.fileList4.length) {
        //   Toast("请上传风险点照片");
        //   return;
        // }

        let data = {
          companyMessageInfo: {
            doorheadUrlList: this.doorheadUrlList,
            interiorUrlList: this.interiorUrlList,
            id: this.options.id,
            keyPartsUrlList: this.keyPartsUrlList,
            riskPointsUrlList: this.riskPointsUrlList,
            ...this.form,
            openingTime: moment(openingTime).format('YYYY/MM/DD')
          },
        };

        updateCompany(data).then((res) => {
          if (res.code == 200) {
            Toast("保存成功");
            navBack("back");
            return;
          }
          Toast(res.message);
        });
      },
    },
  };
</script>

<style>
  page {
    background-color: #f3f3f3 !important;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .placeBasic {
    flex: 1;
    background-color: #f3f3f3;
    display: flex;
    flex-direction: column;

    .placeBasic-title {
      position: absolute;
      top: 10rpx;
      left: 6%;
      color: #ffffff;
      font-size: 34rpx;
      font-weight: bold;
    }

    .wrapper {
      flex: 1;
      height: 0;

      .wrapper-item {
        margin-bottom: 2vh;
        padding: 35rpx 30rpx;
        background-color: #ffffff;
        border-radius: 10rpx;
        width: 710rpx;
      }

      .content {
        margin: 0 auto;
        height: calc(100vh - 90px);
        overflow-y: auto;
      }
    }

    .map-form {
      display: flex;

      .map-img {
        color: #2488f5;
        font-size: 30rpx;
        font-weight: 500;

        image {
          display: inline-block;
          margin-right: 10rpx;
          vertical-align: top;
          width: 30rpx;
          height: 40rpx;
        }
      }
    }

    .place-img {
      display: flex;
      flex-wrap: wrap;

      image {
        flex-shrink: 0;
        margin-bottom: 20rpx;
        margin-right: 8rpx;
      }
    }

    .placeAfter {
      content: "";
      width: 200rpx;
      margin-right: 0rpx;
    }

    .thispageBtn {
      position: absolute;
      width: 100vw;
      bottom: 0;
    }
  }
</style>